<template>
    <div class="categoryItem">
        <h5>{{ item.name }}</h5>
        <div class="bigItem">
            <van-image class="bigItem-img" fit="cover" :src="emphasis.imgURL" />
            <div class="bigItem-mask">
                <div class="box">
                    <div class="title van-ellipsis">
                        {{ emphasis.title }}
                    </div>
                    <div class="subhead van-ellipsis">
                        {{ emphasis.subhead }}
                    </div>
                </div>
            </div>
        </div>
        <div class="CategoryGrid">
            <van-grid :gutter="10" :column-num="2" :clickable="true">
                <van-grid-item v-for="value in list" :key="value.itemId">
                    <div class="GridItem" slot="default">
                        <van-image
                            class="GridItem-img"
                            fit="cover"
                            :src="value.imgURL"
                        />
                        <div class="GridItem-mask">
                            <p class="maosu van-ellipsis">
                                {{ value.title }}
                            </p>
                        </div>
                    </div>
                </van-grid-item>
            </van-grid>
            <div class="button">
                <van-button type="default" @click="changeCategory"
                    >换一批</van-button
                >
                <van-button type="default">更多</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getRecommend } from '@/api/jia';
export default {
    props: {
        item: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            emphasis: this.item.emphasis,
            list: this.item.list
        };
    },
    methods: {
        async changeCategory() {
            // 这里是点击换一批
            try {
                const { data } = await getRecommend();
                this.emphasis = data.emphasis;
                this.list = data.list;
            } catch (error) {
                this.$toast('请检查网络刷新重试');
            }
        }
    }
};
</script>

<style scoped lang="scss">
.categoryItem {
    border-top: solid 1px #9b9898;
    padding-top: 20px;
    h5 {
        font-weight: 400;
        text-align: left;
        margin: 0px;
        padding: 0;
        font-size: 30px;
    }
    .bigItem {
        margin: 15px 0;
        position: relative;
        width: 100%;
        // height: 400px;
        .bigItem-img {
            width: 100%;
            height: 400px;
        }
        .bigItem-mask {
            position: absolute;
            width: 100%;
            height: 100px;
            bottom: 22px;
            color: rgba(255, 255, 255, 100);
            background-color: rgba(0, 0, 0, 0.5);
            .box {
                margin-left: 35px;
                width: 60%;
                .title {
                    margin: 15px 0;
                    font-size: 35px;
                    text-align: left;
                }
                .subhead {
                    font-size: 12px;
                    text-align: left;
                }
            }
        }
    }

    /deep/.van-grid {
        padding-left: unset !important;
        display: flex;
        justify-content: space-between;
        .van-grid-item {
            width: 340px;
            height: 180px;
            flex-basis: unset !important;
            padding-right: unset !important;
            .van-grid-item__content {
                padding: unset;
            }
        }
    }
    .GridItem {
        position: relative;
        width: 100%;
        height: 100%;
        .GridItem-img {
            width: 100%;
            height: 100%;
        }
        .GridItem-mask {
            position: absolute;
            width: 100%;
            height: 40px;
            bottom: 0;
            color: rgba(255, 255, 255, 100);
            background-color: rgba(0, 0, 0, 0.5);
            padding-top: 14px;
            // line-height: 40px;
            .maosu {
                font-size: 12px;
                margin: 0;
                padding: 0;
                text-align: left;
            }
        }
    }
    .button {
        height: 120px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        /deep/.van-button {
            width: 240px;
            height: 55px;
        }
    }
}
</style>
